<template>
  <div class="index.vue">
    <div class="w">
      <div style="margin-bottom:10px">
        <msgHint></msgHint>
      </div>
      <div class="brief_content_box">
        <div class="brief_content_right">
          <div>
            <crumbs
              :navList='navList'
              :navHid="false"
              :oneActive="true"
              @handSonNav="handSonNav"
            >
              <div class="com_box">
                <div class="com_box_name_box">
                  您的姓名:
                  <div>
                    <input
                      v-model="user.username"
                      placeholder="请输入您的姓名"
                      class="com_input"
                      type="text"
                    >
                  </div>
                  联系方式:
                  <div>
                    <input
                      v-model="user.phone"
                      placeholder="请输入您的联系方式"
                      class="com_input"
                      type="text"
                    >
                  </div>
                </div>
              </div>
              <div class="com_box">
                <div class="com_box_title_box">
                  投诉标题:
                  <div>
                    <input
                      v-model="user.complaintTitle"
                      class="com_box_title_box com_box_title com_input"
                      placeholder="请输入投诉标题"
                      type="text"
                    >
                  </div>
                </div>
              </div>
              <div class="com_box">
                <div class="com_box_title_txt">
                  投诉内容:
                  <div>
                    <textarea
                      v-model="user.complaintText"
                      class="com_input com_txt"
                      cols="30"
                      rows="4"
                      placeholder="请输入投诉内容"
                    >
                    </textarea>

                  </div>
                </div>
              </div>
              <div class="hint_how com_box">
                <div class="hint_how_box">
                  投诉内容:
                  <span class="hint_how_tow">（最多可上传2张）</span>
                </div>
              </div>
              <div class="com_box">
                <el-upload
                  :before-upload="beforeUpload"
                  :show-file-list="false"
                  :on-error="err"
                  name="files"
                  class="upload-demo"
                  :on-progress="progress"
                  :action="url"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
                  :file-list="fileList"
                  :multiple="true"
                  :on-exceed="handExceed"
                  :limit='2'
                >
                  <div class="up_download pointer">
                    <div>上 传</div>
                    <div>照 片</div>
                  </div>
                  <!-- <div slot="tip" class="el-upload__tip">仅支持xls/xlsx文件上传</div> -->
                </el-upload>
                <div class="echo_box">
                  <img
                    class="echo_img"
                    v-for="(item,index) in filsArr"
                    :src="item"
                  >
                </div>
              </div>
              <!-- <div class="img_box">
                <img
                  src="../../assets/imges/wzhixian.png"
                  alt=""
                >
              </div>
              <div>
                <div class="ewm_box">
                  <img
                    class="ewm_res pointer"
                    src="../../assets/imges/shuaxin.png"
                    alt=""
                  >
                </div>
                <div class="ewm_text">
                  请顺序点击 <span class="ewm_title">【龙.芥.火.臣】</span>
                </div>
              </div> -->
              <div class="com_box">
                <div
                  class="com_box_title_txt"
                  style="justify-content: space-around;align-items:center;margin-bottom: 30px"
                >
                  <div style="margin-left:-65px;">验证码:</div>
                  <div>
                    <img
                      :src="yzmImg"
                      alt=""
                      @click="handRes()"
                      style="
                      margin-right:20px;"
                    >
                    <input
                      v-model="user.userCode"
                      placeholder="请输入验证码"
                      class="com_input"
                      type="text"
                    >

                  </div>
                </div>
              </div>
              <div class="sub_box clearfix">
                <!-- :style="{ background: user.username != "" && user.phone != ""?"
                #000":""
                }" -->
                <div
                  class="sub pointer"
                  @click="sub()"
                >
                  提交投诉
                </div>

              </div>

            </crumbs>
          </div>
        </div>
      </div>
    </div>
    <transition name="el-zoom-in-center">
      <div
        class="hint_msg_box"
        v-if="msgIsShow"
      >
        <div class="msg_img_box">
          <img
            class="shanchu"
            @click="handYes()"
            src="../../assets/imges/shanchu.png"
            alt=""
          >
          <div style="border: 1px dashed #ccc;">
            <img
              class="msg_img pointer"
              src="../../assets/imges/tixing.png"
            >
          </div>
          <div class="msg_title">{{tjMsg}}</div>
        </div>
        <div
          @click="handYes()"
          class="my_ok pointer"
        >
          我知道了
        </div>
      </div>
    </transition>

  </div>
</template>

<script>
import crumbs from "@/components/crumbs.vue";
import msgHint from "@/components/msgHint.vue";
import axios from "axios";
export default {
  name: "index.vue",
  components: {
    crumbs,
    msgHint
  },
  data() {
    return {
      url: this.$store.state.baseUrl2 + "/bus/appuser/setImg",
      activeId: "0",
      yzmImg: this.$store.state.baseUrl2 + "/bus/appuser/getCaptcha",
      user: {
        complaintTitle: "",
        username: "",
        phone: "",
        complaintText: "",
        imgs: "2",
        userCode: ""
      },
      ewmImg: "",
      filsArr: [],
      fileList: [],
      tjMsg: "",
      msgIsShow: false,
      codes: "",
      imgarr: [],
      navList: [
        [
          {
            aName: "投诉填写",
            sortId: "29"
          }
        ]
      ]
    };
  },
  created() {
    this.handSonNav("29");
  },
  methods: {
    handRes() {
      this.yzmImg =
        this.$store.state.baseUrl2 +
        "/bus/appuser/getCaptcha?" +
        new Date().getTime();
    },
    handExceed() {
      this.$message.warning(`请最多上传两张图片。`);
    },
    handYes() {
      if (this.codes == "200") {
        setInterval(() => {
          this.$router.go(0);
        }, 300);
        this.msgIsShow = false;
      } else {
        this.msgIsShow = false;
      }
    },
    sub() {
      if (this.user.username == "" && this.user.phone == "") {
        this.tjMsg = "姓名和电话不能为空";
        this.msgIsShow = true;
      } else {
        var user = this.user;
        this.$api.sub(user).then(res => {
          this.msgIsShow = true;
          this.codes = res.data.code;
          if (res.data.code == "200") {
            this.tjMsg = res.data.message;
            Object.keys(this.user).map(key => (this.user[key] = ""));
          } else {
            this.yzmImg =
              this.$store.state.baseUrl2 +
              "/bus/appuser/getCaptcha?" +
              new Date().getTime();
            this.user.userCode = "";
            this.tjMsg = res.data.message;
          }
        });
      }
    },
    handleRemove() {},
    handlePreview() {},
    err() {},
    beforeUpload() {},
    progress() {},
    //成功的回调
    handleSuccess(response, file, fileList) {
      console.log("回调===>>>", response.data);
      this.filsArr.push(response.data);
      // this.imgarr.push(response.data);
      this.user.imgs = this.filsArr.join(",");
    },

    handSonNav(id) {
      this.activeId = id;
    }
  }
};
</script>

<style lang='scss' scoped>
.hint_msg_box {
  width: 419px;
  height: 228px;
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  margin-top: -124px;
  margin-left: -208px;
  .my_ok {
    width: 163px;
    height: 42px;
    background: rgba(23, 145, 206, 1);
    text-align: center;
    line-height: 42px;
    font-size: 17px;
    color: #fff;
    margin: 18px auto;
  }
  .msg_img_box {
    position: relative;
    text-align: center;
    background-color: #ccc;
    padding-top: 25px;
    padding-bottom: 19px;
    .msg_title {
      margin-top: 22px;
      font-size: 18px;
      color: #333;
    }
    .msg_img {
      border: 1px dashed #333;
    }
    .shanchu {
      border: 1px dashed #333;
      position: absolute;
      right: 12px;
      top: 12px;
    }
  }
}
.echo_box {
  display: flex;
  margin-top: 30px;
  .echo_img {
    width: 100px;
    height: 100px;
    margin-right: 20px;
  }
}
.sub_box {
  position: relative;
  // text-align: right;
  height: 54px;
  margin-top: 40px;
  margin-bottom: 151px;
  .sub {
    right: 65px;
    position: absolute;
    width: 197px;
    height: 54px;
    background: rgba(128, 128, 128, 1);
    border: 1px solid rgba(204, 204, 204, 1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 1);
    font-size: 20px;
    line-height: 54px;
    text-align: center;
  }
}
.ewm_text {
  width: 728px;
  height: 54px;
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 8px;
  margin: 0 auto;
  margin-top: 25px;
  color: rgba(51, 51, 51, 1);
  font-size: 20px;
  line-height: 54px;
  text-align: center;
}
.ewm_box {
  width: 728px;
  height: 290px;
  background: rgba(23, 145, 206, 1);
  border-radius: 8px;
  text-align: right;
  // margin-left: 34px;
  margin: 0 auto;
  margin-top: 36px;
  .ewm_res {
    margin-top: 24px;
    margin-right: 24px;
  }
}
.img_box {
  text-align: center;
}
.up_download {
  width: 105px;
  height: 101px;
  background: rgba(0, 183, 238, 1);
  border-radius: 8px;
  margin-left: 117px;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  // line-height: 101px;
  word-wrap: break-word;
  padding: 21px;
}
.hint_how {
  margin-top: 13px;
  .hint_how_tow {
    margin-left: 20px;
    color: #333333;
    font-size: 20px;
  }
}
.com_box_title_txt {
  display: flex;
  justify-content: space-between;
  .com_txt {
    overflow: hidden;
    width: 608px;
    height: 140px;
    font-size: 20px;
  }
  .com_box_title {
    width: 608px;
  }
}
.com_box_title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .com_txt {
    overflow: hidden;
    width: 614px;
    height: 140px;
  }
  .com_box_title {
    width: 608px;
  }
}
.com_input {
  width: 230px;
  height: 44px;
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 8px;
  line-height: 44px;
  padding-left: 10px;
}
.com_box {
  font-size: 20px;
  color: #333333;
  padding-left: 66px;
  padding-right: 66px;
  margin-bottom: 40px;
  .com_box_name_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .com_input {
      width: 230px;
      height: 44px;
      border: 1px solid rgba(204, 204, 204, 1);
      border-radius: 8px;
      line-height: 44px;
    }
  }
}
</style>
